import { Button, Cell, Form, Input, Dialog } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import "./index.less";
import {
  clearOverdueApi,
  convertToPersonalApi,
  getUserInfoApi,
  userCheckApi,
} from "../../../servers/servers";
import Taro from "@tarojs/taro";
import { useState } from "react";
import { AtList, AtListItem } from "taro-ui";
import { useMemo } from "react";
import dayjs from "dayjs";
import { useRequest } from "ahooks";

const check = () => {
  const [form] = Form.useForm();

  const [open, setOpen] = useState(false);

  // 是否显示转换个人弹窗
  const [showChange, setShowChange] = useState(false);

  // 查询结果
  const [result, setResult] = useState("");

  const { data: userPermissCodes } = useRequest(async () => {
    const _res = await getUserInfoApi();
    return _res?.data?.permissions?.map((e) => e?.code);
  });

  // 押金类型
  const depositTypeLabel = useMemo(() => {
    if (+result?.depositType === 1) {
      return "微信";
    } else if (+result?.depositType === 2) {
      return "支付宝";
    } else if (+result?.depositType === 3) {
      return "信用授权";
    } else if (+result?.depositType === 4) {
      return "云闪付";
    } else if (+result?.depositType === 5) {
      return "翼支付";
    }
    return;
  }, [result]);

  const { runAsync, loading } = useRequest(async (values) => {
    const _res = await userCheckApi({
      ...values,
    });

    return _res;
  });

  return (
    <>
      <Cell.Group>
        <Cell
          title={
            <div style={{ display: "flex", alignItems: "center" }}>
              <h3>用户信息查询</h3>
            </div>
          }
        />
        <Cell>
          <Form
            form={form}
            className="check_form"
            style={{
              width: "100%",
              "--nutui-form-item-label-width": "30px",
            }}
            footer={false}
            onFinish={async (values) => {
              if (!values.mobile) {
                return Taro.showToast({
                  title: "电话号码 和 身份证至少输入一个",
                  icon: "none",
                  duration: 2000,
                });
              }
              try {
                Taro.showLoading({
                  title: "查询中...",
                });
                const { data } = await runAsync({
                  ...values,
                });
                console.log("查询个人信息", data);
                Taro.hideLoading();
                setResult(data);
              } catch (error) {
                Taro.hideLoading();
                // setResult(error);
              }
            }}
          >
            <Form.Item
              label="电话号码"
              name="mobile"
              style={{
                display: "flex",
                alignItems: "center",
              }}
              className="asqweryqweioryu"
            >
              <Input
                style={{
                  height: "120rpx",
                  borderRadius: "20rpx",
                  border: "1px solid #DFE2EB",
                  paddingLeft: 12,
                }}
                autoFocus
                placeholder="请输入电话号码"
                type="digit"
              />
            </Form.Item>

            {/* <Form.Item label="身份证号码" name="identity">
              <Input placeholder="请输入身份证号码" type="digit" />
            </Form.Item> */}
          </Form>
        </Cell>

        <Cell>
          <Button
            block
            type="primary"
            size="xlarge"
            onClick={() => {
              form.submit();
            }}
            loading={loading}
          >
            查询
          </Button>
        </Cell>

        <Cell>
          <Button
            block
            type="primary"
            fill="outline"
            size="xlarge"
            onClick={() => {
              // Taro.navigateTo({
              //   url: "/pages/cart/binding/bingdinLog/index",
              // });
              Taro.navigateTo({
                url: `/pages/cart/check/checkLog/index`,
              });
            }}
          >
            操作日志
          </Button>
        </Cell>

        {result && (
          <AtList>
            <AtListItem title="用户姓名" note={result?.realName ?? "-"} />
            <AtListItem title="电话号码" note={result?.phoneNumber ?? "-"} />
            <AtListItem title="身份证号" note={result?.idCard ?? "-"} />
            <AtListItem title="电池编码" note={result?.batteryId ?? "-"} />
            <AtListItem
              title="是否满足新用户"
              note={result?.is_new ? "是" : "否"}
            />
            <AtListItem title="认证时间" note={result?.authenTime ?? "-"} />
            <AtListItem title="押金类型" note={depositTypeLabel ?? "-"} />
            <AtListItem title="押金金额" note={result?.depositAmount ?? "-"} />
            <AtListItem title="套餐名称" note={result?.packageName ?? "-"} />
            <AtListItem title="剩余天数" note={result?.availableDays ?? "-"} />
            <AtListItem
              arrow={result?.overdueDays ? "right" : ""}
              title="逾期天数"
              extraText={
                result?.overdueDays && (userPermissCodes ?? [])?.includes(6)
                  ? "消除逾期天数"
                  : ""
              }
              note={result?.overdueDays > 0 ? result?.overdueDays : "-"}
              onClick={() => {
                if (
                  result?.overdueDays &&
                  (userPermissCodes ?? [])?.includes(6)
                ) {
                  setOpen(true);
                }
              }}
            />
            <AtListItem
              title="渠道名称"
              note={result?.orgName ?? "个人"}
              arrow={result?.subjection || result?.is_new ? "right" : ""}
              extraText={result?.subjection || result?.is_new ? "渠道转换个人" : ""}
              onClick={() => {
                if (result?.subjection || result?.is_new) {
                  setShowChange(true);
                }
              }}
            />
          </AtList>
        )}
      </Cell.Group>

      <Cell.Group></Cell.Group>

      <Dialog
        title="是否确定要消除该用户的逾期记录"
        visible={open}
        onConfirm={async () => {
          try {
            await clearOverdueApi({
              mobile: result?.phoneNumber,
            });

            Taro.showToast({
              title: "消除逾期记录成功",
              icon: "none",
              duration: 2000,
            });

            form.submit();

            setOpen(false);
          } catch (error) {
            setOpen(false);
          }
        }}
        onCancel={() => {
          setOpen(false);
        }}
      ></Dialog>

      <Dialog
        title="是否确定要将该用户的转为个人"
        visible={showChange}
        onConfirm={async () => {
          try {
            await convertToPersonalApi({
              mobile: result?.phoneNumber,
            });

            Taro.showToast({
              title: "转换为个人成功",
              icon: "none",
              duration: 2000,
            });

            form.submit();

            setShowChange(false);
          } catch (error) {
            setShowChange(false);
          }
        }}
        onCancel={() => {
          setShowChange(false);
        }}
      ></Dialog>
    </>
  );
};

export default check;
